<template>
  <div class="greenhouse-info">
    <!-- 数据展示表格 -->
    <div class="table-container">
      <table>
        <thead>
          <tr>
            <th>名称</th>
            <th>地址</th>
            <th>占地面积</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ item.name }}</td>
            <td>{{ item.address }}</td>
            <td>{{ item.area }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

// 静态表格数据
const tableData = ref([
  { name: "一号大棚", address: "云南大学", area: "500平方米" },
  { name: "二号大棚", address: "北京大学", area: "600平方米" },
  { name: "三号大棚", address: "复旦大学", area: "700平方米" }
]);
</script>

<style lang="scss" scoped>
.greenhouse-info {
  padding: 20px;
  color: #ffffff;
  background: #0c0a4a;
  border-radius: 8px;
  .table-container {
    margin-top: 10px;
    overflow-x: auto;
    table {
      width: 100%;
      color: #ffffff;
      border-collapse: collapse;
      background-color: #222222;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
      thead {
        background-color: #333333;
        tr {
          th {
            padding: 12px;
            font-weight: bold;
            text-align: center;
            border-bottom: 2px solid #444444;
          }
        }
      }
      tbody {
        tr {
          &:hover {
            background-color: #444444;
          }
          td {
            padding: 12px;
            text-align: center;
            border-bottom: 1px solid #444444;
          }
        }
      }
    }
  }
}
</style>
